<template>
  <van-index-bar :sticky="false">
    <template v-for="(Alphabet, index) in uppercaseAlphabet" :key="index">
      <van-index-anchor :index="Alphabet" />
      <template v-for="city in props.Cities" :key="city.cityId">
        <van-cell :title="city.name" v-if="city.pinyin.substring(0, 1).toUpperCase() === Alphabet"
          @click="onClick(city)" />
      </template>
    </template>
  </van-index-bar>
</template>


<script setup>

// import { ref, onMounted } from 'vue'
import { useStore } from "@/stores/index.js"
const store = useStore()
import { useRouter } from 'vue-router'
const router = useRouter()

// 生成大写字母表
const uppercaseAlphabet = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'];

const props = defineProps({
  Cities: {
    type: Array,
    required: true
  }
});



const onClick = (city) => {

  console.log("点击选择的城市", city)

  store.setCityId(city.cityId)
  store.setCityName(city.name)
  store.setPageNum(1)
  store.setTabIndex(0)


  console.log("当前选择的城市", store.cityId, store.cityName)

  router.push({ path: '/' })


};


</script>
